<!--
 * @Author: lixiang
 * @Date: 2021-11-03 16:26:31
 * @Description: 
-->
<template>
  <!-- <Editor id="mytextarea"
        v-model="tinymceHtml"
       :initial-value ="tinymceHtml"
       :init="init"
     /> -->
<Editor id="mytextarea" v-model="tinymceHtml" :value="tinymceHtml" :init="init"></Editor>


</template>

<script>
import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
import "tinymce/themes/silver"
import 'tinymce/skins/ui/oxide/skin.css'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver/theme'
export default {
  name: 'tinymce',
    props:{
      popValue:{
          type: String,
          default: ""
      }  
    },
    watch:{
     popValue:function(){
         this.tinymceHtml=this.popValue;
     },
     // 监听编辑器的值
     tinymceHtml:function(n,o){
       // 向父组件传值
       this.$emit('changeHandler',n)
    }
    },
  data () {
    return {
      tinymceHtml: '请输入内容',
      // init: {
      //   selector: '#mytextarea',
      //   language_url: '/static/tinymce/tinymce_languages/langs/zh_CN.js',// 语言包的路径
      //   language: 'zh_CN',//语言
      //   skin_url: '/static/tinymce/skins/ui/oxide',// skin路径
      //   content_css: '/static/tinymce/skins/content/default/content.css',
      //   height: 300,//编辑器高度
      //   branding: false,//是否禁用“Powered by TinyMCE”
      //   menubar: false,//顶部菜单栏显示

      // },
      init:{
                    selector: '#mytextarea',
                    language_url: '/static/tinymce/tinymce_languages/langs/zh_CN.js',// 语言包的路径
                    language: 'zh_CN',//语言
                    skin_url: '/static/tinymce/skins/ui/oxide',// skin路径
                    content_css: '/static/tinymce/skins/content/default/content.css',
                    branding: false,//是否禁用“Powered by TinyMCE”
                    menubar: false,//顶部菜单栏显示
                    plugins: 'print preview searchreplace autolink fullscreen image link media code codesample table charmap hr pagebreak nonbreaking anchor advlist lists textpattern help emoticons autosave bdmap indent2em formatpainter axupimgs',
                    toolbar: 'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link | alignleft aligncenter alignright alignjustify | bullist numlist blockquote subscript superscript removeformat | \
                    formatselect fontselect fontsizeselect | \
                    table image media charmap emoticons hr pagebreak print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
             
                    // toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                    //  styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                    //  table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs importword kityformula-editor',
                    // height: 650, //编辑器高度
                    min_height: 400,
                    /*content_css: [ //可设置编辑区内容展示的css，谨慎使用
                        '/static/reset.css',
                        '/static/ax.css',
                        '/static/css.css',
                    ],*/
                    fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                    font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
                    link_list: [
                        { title: '预置链接1', value: 'http://www.tinymce.com' },
                        { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
                    ],
                    image_list: [
                        { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
                        { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
                    ],
                    image_class_list: [
                    { title: 'None', value: '' },
                    { title: 'Some class', value: 'class-name' }
                    ],
                   
                    //为内容模板插件提供预置模板
                    templates: [
                        { title: '模板1', description: '介绍文字1', content: '模板内容' },
                        { title: '模板2', description: '介绍文字2', content: '<div class="mceTmpl"><span class="cdate">CDATE</span>，<span class="mdate">MDATE</span>，我的内容</div>' }
                    ],
                    //content_security_policy: "script-src *;",
                    extended_valid_elements:'script[src]',
                    //
                    template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
                    template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
                    autosave_ask_before_unload: false,
                    toolbar_mode : 'wrap',
                    automatic_uploads : false,
                    images_upload_base_path: '/demo',
                    images_upload_handler: function (blobInfo, succFun, failFun) {
                        succFun('/demo/images/img.jpg');
                    },
                    //icons:'ax-color',
                    file_picker_types:'media',
                     //importcss_append: true,
                    //自定义文件选择器的回调内容
                    file_picker_callback: function (callback, value, meta) {
                        if (meta.filetype === 'file') {
                          callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
                        }
                        if (meta.filetype === 'image') {
                          callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
                        }
                        if (meta.filetype === 'media') {
                          callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
                        }
                    },

                }
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods:{
    changeHandler(event){
      console.log(event)
    },
    handlerFunction(event,editor ){ //
    alert(33)
      console.log(editor,event)
      this.tinymceHtml=editor;
      this.$emit("changeHandler",this.tinymceHtml)
    }
  },
  components: {Editor}
}
</script>